@mixin placeholder($color) {
  ::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: $color;
  }

  :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: $color;
  }

  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: $color;
  }

  :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: $color;
  }
}

@mixin right-arrow($size, $color, $width:0.01rem) {
  width: $size;
  height: $size;
  display: inline-block;
  border-right: $width solid $color;
  border-bottom: $width solid $color;
  transform: rotate(-45deg);
}

@mixin left-arrow($size, $color, $width) {
  width: $size;
  height: $size;
  display: inline-block;
  border-right: $width solid $color;
  border-bottom: $width solid $color;
  transform: rotate(135deg);
}

@mixin arrow($direction: right) {
  border: 1px solid #666;
  border-left: none;
  border-bottom: none;

  @if $direction==right {
    transform: rotate(45deg);
  }

  @else if $direction==top {
    transform: rotate(-45deg);
  }

  @else if $direction==bottom {
    transform: rotate(135deg);
  }

  @else if $direction==left {
    transform: rotate(-135deg);
  }
}

//实体箭头
@mixin triArrow($direction, $size, $color) {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-width: $size;
  cursor: pointer;

  @if $direction==top {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent $color transparent;
    border-top: none;
  }

  @else if $direction==bottom {
    border-style: solid dashed dashed dashed;
    border-color: $color transparent transparent transparent;
    border-bottom: none;
  }

  @else if $direction==right {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent $color;
    border-right: none;
  }

  @else if $direction==left {
    border-style: dashed solid dashed dashed;
    border-color: transparent $color transparent transparent;
    border-left: none;
  }
}

/* 居中 垂直居中对齐 */

@mixin flex-center {
  display: -webkit-box;
  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box;
  /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox;
  /* 混合版本语法: IE 10 */
  display: -webkit-flex;
  /* 新版本语法: Chrome 21+ */
  display: flex;
  /* 新版本语法: Opera 12.1, Firefox 22+ */

  -webkit-box-pack: center;
  /*水平居中对齐*/
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  /*垂直居中对齐*/
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  align-items: center;

  -webkit-box-direction: normal;
  /*子元素行排列*/
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
}

/* 单行超出省略号 */
@mixin ellipsis {
  white-space: nowrap;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden
}